<template>
    <a-modal :confirm-loading="modalOption.loading" :okText="modalOption.okText" @ok="modalOption.onOk"
        @cancel="modalOption.onCancel" :cancelText="modalOption.cancelText" :width="modalOption.width" :visible="visible"
        :title="modalOption.title">
        <div class="container">
            <a-form-model ref="formModel" :label-col="formOption.labelCol" :wrapper-col="formOption.wrapperCol"
                :layout="formOption.layout" :label-align="formOption.labelAlign" :hide-required-mark="formOption.hideRequiredMark"
                :rules="formOption.rules" :model="formOption.formData">
                <a-card hoverable>
                    <div class="tool-bar">
                        <a-row>
                            <a-col :span="6">
                                <a-form-model-item label="药材类型" prop="materialType">
                                    <a-select :disabled="viewDetail" class="inputs" allowClear v-model="formOption.formData.materialType"
                                              placeholder="药材类型" @change="materialTypeChange">
                                        <a-select-option value="中药材">中药材</a-select-option>
                                        <a-select-option value="辅料">辅料</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-model-item label="选择品名" prop="name">
                                    <a-select :disabled="viewDetail" class="inputs" allowClear v-model="formOption.formData.name" placeholder="选择品名" @change="nameChange">
                                        <a-select-option v-for="(item,i) in searchSource.materialList" :key="i"
                                                         :value="item.name">{{item.name}}</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-model-item label="药材名称">
                                    <span style="font-size: 20px;font-weight: 500">{{formOption.formData.name}}</span>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-model-item label="现库存量" v-if="formOption.formData.stockNum">
                                    <span style="font-size: 20px;font-weight: 500;color: red">{{formOption.formData.stockNum}}kg</span>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </div>
                    <div class="tool-bar">
                        <a-row>
                            <a-col :span="6">
                                <a-form-model-item label="计划采购数量" prop="purchaseNum">
                                    <a-input :disabled="viewDetail" class="inputs" v-model="formOption.formData.purchaseNum" placeholder="计划采购数量" suiffx="kg"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-model-item label="产地" prop="prodAddress">
                                    <a-select :disabled="viewDetail" class="inputs" allowClear v-model="formOption.formData.prodAddress" placeholder="选择标准">
                                        <a-select-option v-for="(item,i) in originList" :key="i" :value="item.value">{{item.value}}</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-model-item label="预计购回日期" prop="purchaseTime">
                                    <a-date-picker :disabled="viewDetail" :locale="locale" v-model="formOption.formData.purchaseTime" placeholder="预计购回日期" valueFormat="YYYY-MM-DD"  class="inputs"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-model-item label="采购批号" prop="batch">
                                    <a-input :disabled="viewDetail" class="inputs" v-model="formOption.formData.batch" placeholder="采购批号"/>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </div>
                </a-card>
                <div class="table">
                    <a-card hoverable title="采购部门信息">
                        <a-row>
                            <a-col :span="6">
                                <a-form-model-item label="部门" prop="department">
                                    <a-select :disabled="viewDetail" class="inputs" allowClear v-model="formOption.formData.department" placeholder="部门" @change="departmentChange">
                                        <a-select-option v-for="(item,i) in searchSource.orgList" :key="i" :value="item.name">{{item.name}}</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-model-item label="负责人" prop="person">
                                    <a-select :disabled="viewDetail" class="inputs" allowClear v-model="formOption.formData.person" placeholder="负责人">
                                        <a-select-option v-for="(item,i) in searchSource.personList" :key="i" :value="item.name">{{item.name}}</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-model-item label="供应商" prop="supplier">
                                    <a-input :disabled="viewDetail" class="inputs" allowClear v-model="formOption.formData.supplier" placeholder="供应商"></a-input>
<!--                                    <a-select class="inputs" allowClear v-model="formOption.formData.supplier" placeholder="供应商">-->
<!--                                        <a-select-option value="天成">天成</a-select-option>-->
<!--                                        <a-select-option value="威骊">威骊</a-select-option>-->
<!--                                    </a-select>-->
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-card>
                </div>
            </a-form-model>
        </div>
    </a-modal>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import locale from "ant-design-vue/lib/date-picker/locale/zh_CN";
import nextApi from "@/api/nextApi";

@Component({})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) editId!: string;
    @Prop({default:false}) viewDetail!:boolean
    @Watch("visible")
    visibleChange(val) {
        if (val) {
            this.getRootData()
        }else{
            this.formOption.formData = {
                materialId:'',
                materialType: "", //物料类型
                name: "", //品名/药材名称
                stockNum:'',
                purchaseNum: "",
                publishState:"1",
                prodAddress: "",
                purchaseTime: "",
                batch: "",
                department: "",
                person: "",
                supplier: "",
            }
        }
    }
    @Watch("editId")
    editIdChange(val) {
        if (val) {
            console.log('id:',val)
            this.modalOption.title = "编辑";
            this.getDetailData();
        }else{
            this.modalOption.title = "新增";
            this.formOption.formData = {
                materialId:'',
                materialType: "", //物料类型
                name: "", //品名/药材名称
                stockNum:'',
                purchaseNum: "",
                publishState:"1",
                prodAddress: "",
                purchaseTime: "",
                batch: "",
                department: "",
                person: "",
                supplier: "",
            }
        }
    }
    //组件配置
    locale = locale;
    modalOption: any = {
        width: "90%",
        title: "新增",
        okText: "保存",
        cancelText: "取消",
        loading: false,
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };
    modalOk(){
        (this.$refs.formModel as any).validate(async (valid: boolean) => {
            if (valid) {
                this.modalOption.loading = true;
                try {
                    const res = await nextApi.addProcurementPlan(this.formOption.formData)
                    if(res.code === 200){
                        this.$message.success(res.msg)
                        this.$emit("closeModal")
                    }
                }finally {
                    this.modalOption.loading = false;
                }
            }
        });
    }

    //表单数据源
    searchSource:{[key:string]:any[]} = {
        materialList:[],
        orgList:[],
        personList:[],
    }


    //表单配置
    formOption: any = {
        labelCol: { style: { width: "140px" } },
        wrapperCol: { style: { width: "180px" } },
        layout: "inline",
        labelAlign: "right",
        hideRequiredMark: false,
        formData: {
            materialId:'',
            materialType: "", //物料类型
            name: "", //品名/药材名称
            stockNum:'',
            purchaseNum: "",
            publishState:"1",
            prodAddress: "",
            purchaseTime: "",
            batch: "",
            department: "",
            person: "",
            supplier: "",
        },
        rules: {
            materialType: [{ required: true, message: "请选择物料类型", trigger: "blur" },],
            name: [{ required: true, message: "请选择品名/药材名称", trigger: "blur" },],
            stockNum: [{ required: true, message: "请输入库存数量", trigger: "blur" },],
            purchaseNum: [{ required: true, message: "请输入计划采购数量", trigger: "blur" },],
            prodAddress: [{ required: false, message: "请选择产地", trigger: "blur" },],
            purchaseTime: [{ required: true, message: "请选择预计购回日期", trigger: "blur" },],
            batch: [{ required: true, message: "请输入采购批号", trigger: "blur" },],
            department: [{ required: true, message: "请选择部门", trigger: "blur" },],
            person: [{ required: true, message: "请选择负责人", trigger: "blur" },],
            supplier: [{ required: true, message: "请输入供应商", trigger: "blur" },],
        },
    };


    /**
     * @description 处理一些数据的方法
     *  **/
    materialTypeChange(v){
        if(!v){
            this.formOption.formData.name = void 0
            this.formOption.formData.prodAddress = void 0
            return
        }
        this.getMaterialList()
    }
    nameChange(v){
        this.formOption.formData.stockNum = this.searchSource.materialList.find(item=>item.name == this.formOption.formData.name).stockNum
        let find = this.searchSource.materialList.find(item=>item.name === v)
        if(find){
            console.log(find)
            this.originList = find.prodAddress
            this.formOption.formData.materialId = find.id
            if(find.prodAddress.length){
                this.formOption.formData.prodAddress = find.prodAddress[0].value
            }else{
                this.formOption.formData.prodAddress = ''
            }
        }
    }
    departmentChange(){
        this.departmentId = this.searchSource.orgList.find(item=>item.name == this.formOption.formData.department).id
        this.getTableData()
    }
    originList:any = []
    async getMaterialList(){
        let params = {
            materialType:this.formOption.formData.materialType
        }
        const res = await nextApi.selectMaterialListByType(params)
        this.searchSource.materialList = res.data
        this.searchSource.materialList.forEach(item=>{
            item.prodAddress = JSON.parse(item.prodAddress)
            item.prodAddress.forEach((jack,j)=>{
                if(jack.value == ""){
                    item.prodAddress.splice(j,1)
                }
            })
        })
        console.log(this.searchSource)
        if(this.searchSource.materialList.length){
            this.formOption.formData.name = this.searchSource.materialList[0].name
            this.formOption.formData.materialId = this.searchSource.materialList[0].id
            this.formOption.formData.stockNum = this.searchSource.materialList[0].stockNum
            this.formOption.formData.prodAddress = this.searchSource.materialList[0].prodAddress[0].value
            this.originList = this.searchSource.materialList[0].prodAddress
        }else{
            this.originList = []
            this.formOption.formData.name = void 0
            this.formOption.formData.prodAddress = void 0
        }
    }
    async getRootData() {
        try {
            // 获取顶级架构
            const res = await nextApi.getOrganizationList("3a3bafbe4be36ca7fa9858b55687de4b");
            let data = res.data;
            this.searchSource.orgList = data[0].children
        } finally {

        }
    }
    async getDetailData(){
        const res = await nextApi.selectPurchaseDetailById({id:this.editId})
        this.formOption.formData = res.data
        //根据当前部门id获取部门下人员列表
        await this.getRootData()
        this.departmentId = this.searchSource.orgList.find(item=>item.name == this.formOption.formData.department).id
        await this.getTableData()
    }
    departmentId:string = ''
    async getTableData() {
        let params = {
            organizationId: this.departmentId,
            pageSize: 1,
            pageNum: 100,
        };
        try {
            const res = await nextApi.getAccountList(params);
            const data = res.data;
            if (data && data.rows) {
                this.searchSource.personList = data.rows;
                this.formOption.formData.person = this.searchSource.personList[0].name;
            } else {
                this.searchSource.personList = [];
            }
        } finally {

        }
    }
    closeModal() {
        this.$emit("closeModal");
    }
}
</script>
<style scoped lang="scss">
.container {
    padding: 0;
    .MR-10 {
        margin-right: 10px;
    }
    .inputs {
        width: 200px;
    }
    .tool-bar {
        margin-bottom: 20px;

    }
    .table {
        margin-top: 20px;
    }
}
</style>
